@import "../../../assets/scss/pxVw";

$designWidth: 1920;
.baccarat {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  .baccaratBox {
    background: url("../../../assets/images/theColor/baccarat/bg.jpg") center top no-repeat;
    background-size: auto 100%;
    height: 1222px;
    width: 100%;
    overflow-x: auto;
  }
}

.baccaratBetBox {
  height: vw(980);
  max-height: 650px;
  min-height: 612px;
  background: url("../../../assets/images/theColor/baccarat/table_bg.png") center top no-repeat;
  background-size: 100% auto;
  .currentResult {
    position: absolute;
    left: 16.6%;
    top: 10.4%;
    width: 16%;
    height: 9%;
    h3 {
      font-size: 14px;
      color: #130B16;
      line-height: 14px;
    }
    .resultBox {
      margin-top: 10px;
      margin-left: -3px;
      height: 50%;
      p {
        height: 100%;
        img {
          width: auto;
          height: 100%;
          display: inline-block;
          margin-left: 5px;
        }
        &:last-child{
          margin-right: 10px;
        }
      }
    }
  }
  .rulesBox {
    position: absolute;
    right: 18%;
    top: 22.4%;
    font-size: 14px;
    color: #FFFFFF;
    padding: 5px 20px;
    letter-spacing: 4px;
  }
  .lotteryBetBox {
    width: 100%;
    height: 74%;
    position: absolute;
    top: 26%;
    padding: 4.5% 4% 5%;
    .cutDownTimeBox {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      p {
        font-size: 16px;
        color: #FFFFFF;
        line-height: 32px;
        text-align: center;
        &:last-child {
          margin-top: 2px;
          span {
            font-family: 'HansHandItalic';
            font-size: 28px;
            color: #834400;
          }
        }

      }
    }
    .betArea {
      width: 100%;
      height: 100%;
      li {
        position: absolute;
        .chip {
          position: absolute;
          width: 42px;
          height: 42px;
          bottom: 10px;
          right: 10px;
          img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
          }
          &.chipHidden {
            display: none;
          }
        }
      }
      .resultCard {
        width: 10%;
        height: 44.6%;
        top: 15%;
        img {
          width: 84%;
          height: 88.1%;
          position: absolute;
          left: 7.4%;
          top: 4.3%;
        }
        &:first-child, &:nth-child(2) {
          background: url("../../../assets/images/theColor/baccarat/bet/win_bg.png") center top no-repeat;
          background-size: 100% 100%;
        }
        &:nth-child(3), &:nth-child(4) {
          background: url("../../../assets/images/theColor/baccarat/bet/win2_bg.png") center top no-repeat;
          background-size: 100% 100%;
        }
        &:first-child {
          left: 20%;
        }
        &:nth-child(2) {
          left: 32%;
        }
        &:nth-child(3) {
          right: 32%;
        }
        &:nth-child(4) {
          right: 20%;
        }
      }
      .left, .right {
        width: 15%;
        height: 82%;
        top: 0;
        img {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          width: auto;
          height: 24%;
          top: 48px;
        }
        .odds {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          padding: 0 10px;
          height: 25px;
          background: rgba(0, 0, 0, 0.28);
          border-radius: 100px;
          font-size: 16px;
          color: #DABB94;
          line-height: 23px;
        }
        .chip {
          bottom: 30px;
        }
      }
      .left {
        left: 0;
        background: url("../../../assets/images/theColor/baccarat/bet/rec4.png") center top no-repeat;
        background-size: 100% 100%;
        &.onSel {
          background: url("../../../assets/images/theColor/baccarat/bet/rec4_on.png") center top no-repeat;
          background-size: 100% 100%;
        }

      }
      .right {
        right: 0;
        background: url("../../../assets/images/theColor/baccarat/bet/rec5.png") center top no-repeat;
        background-size: 100% 100%;
        &.onSel {
          background: url("../../../assets/images/theColor/baccarat/bet/rec5_on.png") center top no-repeat;
          background-size: 100% 100%;
        }
        .chip {
          left: 10px;
          img {
            right: 0;
          }
        }
      }
      .middleL, .middleR {
        width: 16.5%;
        height: 29%;
        bottom: 14px;
        img {
          position: absolute;
          left: 14px;
          width: auto;
          height: 38%;
          top: 16px;
        }
        .odds {
          position: absolute;
          left: 138px;
          top: 28px;
          transform: translate(-50%, -50%);
          padding: 0 10px;
          height: 25px;
          background: rgba(0, 0, 0, 0.28);
          border-radius: 100px;
          font-size: 16px;
          color: #DABB94;
          line-height: 23px;
        }
      }
      .middle {
        width: 27.6%;
        height: 33%;
        bottom: 0;
        left: 36.1%;
        background: url("../../../assets/images/theColor/baccarat/bet/rec2.png") center top no-repeat;
        background-size: 100% auto;
        &.onSel {
          background: url("../../../assets/images/theColor/baccarat/bet/rec2_on.png") center top no-repeat;
          background-size: 100% auto;
        }
        img {
          position: absolute;
          left: 50%;
          top: 16px;
          transform: translateX(-50%);
          width: auto;
          height: 70%;
        }
        .odds {
          position: absolute;
          right: 42px;
          top: 16px;
          padding: 0 10px;
          height: 25px;
          background: rgba(0, 0, 0, 0.28);
          border-radius: 100px;
          font-size: 16px;
          color: #DABB94;
          line-height: 23px;
        }
        .chip {
          right: 30px;
          bottom: 16px;
        }
      }
      .middleL {
        left: 18.2%;
        background: url("../../../assets/images/theColor/baccarat/bet/rec1.png") center top no-repeat;
        background-size: 100% auto;
        &.onSel {
          background: url("../../../assets/images/theColor/baccarat/bet/rec1_on.png") center top no-repeat;
          background-size: 100% auto;
        }
        .chip {
          img {
            left: 0;
          }
        }
      }
      .middleR {
        right: 18.2%;
        background: url("../../../assets/images/theColor/baccarat/bet/rec3.png") center top no-repeat;
        background-size: 100% auto;
        &.onSel {
          background: url("../../../assets/images/theColor/baccarat/bet/rec3_on.png") center top no-repeat;
          background-size: 100% auto;
        }
        .chip {
          left: 10px;
          img {
            left: 0;
          }
        }
      }
    }
  }
}

.confirmBetBox {
  margin-top: 20px;
  overflow: visible;
  .chipsBox {
    text-align: center;
    overflow: visible;
    .chipL, .chipR {
      height: 53px;
      display: inline-block;
      p{
        font-size: 14px;
        color: #FFFFFF;
        height: 53px;
        line-height: 46px;
        padding-right:8px;
      }
    }
    .chipRBox,.chipLBox{
      position: absolute;
      top: 0;
      width: 50%;
    }
    .chipRBox{
      right: -56%;
      text-align: left;
    }
    .chipLBox{
      left: -56%;
      text-align: right;
    }
    .chipL {
      padding: 0 15px 0 65px;
      background: url("../../../assets/images/theColor/baccarat/betM_L.png") left center no-repeat,url("../../../assets/images/theColor/baccarat/betM_r.png") right center no-repeat;
      background-size: auto 100%;
      p{
        background: url("../../../assets/images/theColor/baccarat/betM_m.png") left center repeat;
        background-size: auto 100%;

      }
    }
    .chipR {
      padding: 0 14px 0 56px;
      background: url("../../../assets/images/theColor/baccarat/betA_l.png") left center no-repeat,url("../../../assets/images/theColor/baccarat/betA_r.png") right center no-repeat;
      background-size: auto 100%;
      p{
        background: url("../../../assets/images/theColor/baccarat/betA_m.png") left center repeat;
        background-size: auto 100%;
      }
    }
    .chipM {
      width: 50%;
      margin: 0 auto;
      height: 110px;
      overflow: visible;
      .chipItem {
        width: 10%;
        position: absolute;
        top: 0;
        img {
          position: relative;
          left: 0;
          top: 0;
          width: 100%;
          height: auto;
        }
        &:nth-child(1), &:nth-child(7) {
          &.chipOn {
            top: -16%;
          }
        }
        &:nth-child(2), &:nth-child(6) {
          top: 16%;
          &.chipOn {
            top: 0%;
          }
        }
        &:nth-child(3), &:nth-child(5) {
          top: 28%;
          &.chipOn {
            top: 12%;
          }
        }
        &:nth-child(1) {
          left: 0;
        }
        &:nth-child(7) {
          left: 90%;
        }
        &:nth-child(2) {
          left: 15%;
        }
        &:nth-child(3) {
          left: 30%;
        }
        &:nth-child(4) {
          left: 45%;
          top: 33%;
          &.chipOn {
            top: 15%;
          }
        }
        &:nth-child(5) {
          left: 60%;
        }
        &:nth-child(6) {
          left: 75%;
        }
        &:last-child{
          width: 0;
        }

      }
    }
  }
  .functionBtn {
    text-align: center;
    margin-top: 10px;
    .funcBtnItem {
      height: vw(90);
      display: inline-block;
      &:first-child, &:last-child {
        width: 15%;
      }
      &:first-child {
        background: url("../../../assets/images/theColor/baccarat/btn_clear.png") center no-repeat;
        background-size: 100% auto;
      }
      &:nth-child(2) {
        background: url("../../../assets/images/theColor/baccarat/btn_confirm.png") center no-repeat;
        background-size: 100% auto;
        width: 20%;
        margin: 0 28px;
      }
      &:nth-child(3) {
        background: url("../../../assets/images/theColor/baccarat/btn_allIn.png") center no-repeat;
        background-size: 100% auto;
        &.on{
          background: url("../../../assets/images/theColor/baccarat/btn_allIn_on.png") center no-repeat;
          background-size: 100% auto;
        }
      }
    }
  }
}